<%@ page import="java.text.SimpleDateFormat" %><%--
  Created by IntelliJ IDEA.
  User: MadFrog
  Date: 2018/01/22
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>投票管理</title>
    <%@include file="../common/_head.jsp" %>
</head>
<body ontouchstart>
<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab-elect-list">浏览投票</a>
        <a class="weui-navbar__item" href="#tab-elect-add">创建投票</a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab-elect-list" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="content-padded weui-panel weui-panel_access">
                <c:forEach items="${electList }" var="elect">
                    <div class='weui-media-box weui-media-box_text' id="${elect.id }">
                        <input type='hidden' value=${elect.id }>
                        <h4 class='weui-media-box__title'>${elect.title }</h4>
                        <p class='weui-media-box__desc'>${elect.description }</p>
                        <ul class='weui-media-box__info'>
                            <li class='weui-media-box__info__meta'>完成比例:${elect.completeRatio }</li>
                            <li class='weui-media-box__info__meta'>截止时间:<fmt:formatDate value="${elect.closeDate}" pattern="yyyyMMdd HH:mm" /></li>
                            <li class='weui-media-box__info__meta'>状态:${elect.status.getName() }</li>
                        </ul>
                    </div>
                </c:forEach>
            </div>
            <div class="weui-loadmore" hidden="true">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips"></span>
            </div>
        </div>
        <div id="tab-elect-add" class="weui-tab__bd-item">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入标题" name="title" type="text">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="投票说明，请输入文字" rows="3" name="description"></textarea>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="closeDate" class="weui-label">截止时间</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="closeDate" name="closeDate" type="text">
                </div>
            </div>
            <div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">允许弃权</div>
                <div class="weui-cell__ft">
                    <input type="checkbox" class="weui-switch" name="allowAbstain" value="YES">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>投票数量</p>
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input type="number" class="weui-count__number" value="3" name="electedNumber">
                        <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>
            </div>

            <div class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips">候选人</span>
            </div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="candidate_allStaff">
                    <div class="weui-cell__bd">
                        <p>全体教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="candidate" id="candidate_allStaff"
                               checked="checked"
                               value="1">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="candidate_inFormal">
                    <div class="weui-cell__bd">
                        <p>编内教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="candidate" id="candidate_inFormal" value="2">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="candidate_outFormal">
                    <div class="weui-cell__bd">
                        <p>外聘教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="candidate" id="candidate_outFormal" value="3">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="candidate_isCommunist">
                    <div class="weui-cell__bd">
                        <p>党员</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="candidate" id="candidate_isCommunist" value="4">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <a href="javascript:void(0);" class="weui-cell weui-cell_link">
                    <div class="weui-cell__bd">手动选择</div>
                </a>
            </div>

            <div class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips">投票人</span>
            </div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="voter_allStaff">
                    <div class="weui-cell__bd">
                        <p>全体教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="voter" id="voter_allStaff" checked="checked"
                               value="1">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="voter_inFormal">
                    <div class="weui-cell__bd">
                        <p>编内教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="voter" id="voter_inFormal" value="2">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="voter_outFormal">
                    <div class="weui-cell__bd">
                        <p>外聘教工</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="voter" id="voter_outFormal" value="3">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="voter_isCommunist">
                    <div class="weui-cell__bd">
                        <p>党员</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="voter" id="voter_isCommunist" value="4">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <a href="javascript:void(0);" class="weui-cell weui-cell_link">
                    <div class="weui-cell__bd">手动选择</div>
                </a>
            </div>
            <div style="text-align:center">
                <a href="javascript:;" onclick="send()" class="weui-btn weui-btn_primary weui-btn_medium">保存</a>
            </div>
        </div>
    </div>
</div>
<%@include file="../common/_foot.jsp" %>
<script>

    // 滑动加载
    $(document).ready(function () {
        var start = 0;  //分页开始处
        var loading = false;  //状态标记
        $("#tab-elect-list").infinite(500).on("infinite", function () {
            $(".weui-loadmore").show();
            if (loading) return;
            loading = true;
            // 加载数据
            var params = {};
            start += 15;
            params.start = start;
            $.ajax({
                type: "get",
                url: "${ctx}/teacher/elect/find",
                dataType: "json",
                data : params,
                success: function (re) {
                    if (true == re.success) {
                        var elects = re.data;
                        var str = "";
                        elects.forEach(function (item, index, array) {
                            var closeTime = timeStamp2Time(item.closeDate);
                            var statusChinese =  (item.status=="ENABLE")?"启用":"停用";
                            str += "                 <div class='weui-media-box weui-media-box_text' id=" + item.id + ">\n" +
                                // "                        <input type='hidden' value=" + item.id + ">\n" +
                                "                        <h4 class='weui-media-box__title'>"+ item.title + "</h4>\n" +
                                "                        <p class='weui-media-box__desc'>" + item.description + "</p>\n" +
                                "                        <ul class='weui-media-box__info'>\n" +
                                "                           <li class='weui-media-box__info__meta'>完成比例:" + item.completeRatio + "</li>\n" +
                                "                           <li class='weui-media-box__info__meta'>截止时间:" + closeTime + "</li>\n" +
                                "                           <li class='weui-media-box__info__meta'>状态:" + statusChinese + "</li>\n" +
                                "                        </ul>" +
                                "                    </div>"
                        });
                        setTimeout(function () {
                            $(".content-padded").append(str);
                            loading = false;
                        }, 1500);   //模拟延迟
                    } else {
                        $.toast("后台错误，请联系管理员", "cancel");
                    }
                },
                error: function (re) {
                    $.toast("网络请求失败，请联系管理员", "cancel");
                }
            });
        });
    });
    $(document).ready(function () {
        var MAX = 99, MIN = 1;
        $('.weui-count__decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
        });
        $('.weui-count__increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number)
        });
        $("#closeDate").datetimePicker();
    });

    //为每个Elect增加Action Sheet
    $(document).on("click", ".weui-media-box", function (event) {
        // 找父亲
        // var electId = $(event.target).siblings("input")[0].defaultValue;
        var parent = $(event.target).parents(".weui-media-box")[0];
        var electId = parent.id;
        $.actions({
            actions: [{
                text: "查看详情",
                className: "color-primary",
                onClick: function() {
                    window.location = "${ctx}/teacher/electDetail/" + electId;
                }
            }, {
                text: "切换状态",
                className: "color-warning",
                onClick: function() {
                    $.ajax({
                        type: "get",
                        url: "${ctx}/teacher/elect/toggleStatus/" + electId,
                        dataType: "json",
                        success: function (re) {
                            if (true == re.success) {
                                $.toast(re.msg, function () {
                                    var statusLi = $(parent).find(".weui-media-box__info__meta")[2];
                                    var statusText = statusLi.innerHTML;
                                    $(statusLi).html(statusText=="状态:启用"?"状态:停用":"状态:启用");
                                });
                            } else {
                                $.toast("后台错误，请联系管理员", "cancel");
                            }
                        },
                        error: function (re) {
                            $.toast("网络请求失败，请联系管理员", "cancel");
                        }
                    });
                }
            }, {
                text: "删除投票",
                className: "color-danger",
                onClick: function() {
                    $.confirm("确定删除该投票？", "确认删除", function () {
                        $.ajax({
                            type: "get",
                            url: "${ctx}/teacher/elect/delete/" + electId,
                            dataType: "json",
                            success: function (re) {
                                if (true == re.success) {
                                    $.toast(re.msg, function () {
                                        window.location = "${ctx}/teacher/index";
                                    });
                                } else {
                                    $.toast("后台错误，请联系管理员", "cancel");
                                }
                            },
                            error: function (re) {
                                $.toast("网络请求失败，请联系管理员", "cancel");
                            }
                        });
                    });

                }
            }]
        });
    });

    // 提交创建的投票
    function send() {
        var params = {};
        params.title = $("input[name='title']").val();
        params.description = $("textarea[name='description']").val();
        params.closeDate = $("input[name='closeDate']").val();
        params.allowAbstain = $("input[name='allowAbstain']").val();
        params.electedNumber = $("input[name='electedNumber']").val();
        params.candidate = $("input[name='candidate']:checked").val();
        params.voter = $("input[name='voter']:checked").val();

        if (params.title == null || params.title == undefined || params.title == '') {
            $.toptip('标题不能为空', 'error');
            return;
        }
        if (params.description == null || params.description == undefined || params.description == '') {
            $.toptip('说明不能为空', 'error');
            return;
        }
        if (params.closeDate == null || params.closeDate == undefined || params.closeDate == '') {
            $.toptip('截止时间不能为空', 'error');
            return;
        }
        $.ajax({
            type: "post",
            url: "${ctx}/teacher/elect/add",
            data: params,
            dataType: "json",
            success: function (re) {
                if (true == re.success) {
                    $.toast("操作成功", function () {
                        window.location = "${ctx}/teacher/index";
                    });
                } else {
                    $.toast("后台错误，请联系管理员", "cancel");
                }
            },
            error: function (re) {
                $.toast("网络请求失败，请联系管理员", "cancel");
            }
        });
    }

    // TODO 时间戳转人类可读格式，考虑转到JS工具文件里
    function timeStamp2Time(timeStamp){
        var date = new Date(timeStamp);
        return date.getFullYear() + "" + (date.getMonth()+1) + "" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
    }
</script>
</body>
</html>
